<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">

</style>
<div class="page-header">
	<h1>
		学生门锁白名单管理
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<!-- 筛选 -->
	<div class="widget-box">
		<div class="widget-header">
			<h4 class="widget-title">内容筛选</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline" id="data-search">
					<div class="form-inline keyword-search-div">
						<label class="keyword-search-label">名称&nbsp;&nbsp;&nbsp;&nbsp;</label>
						<div class="keyword-search-box">
							<div class="div-search">
								<input style="float:left;height:30px;width:180px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="student-name" placeholder="搜索学生名称..." autocomplete="off">
								<span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
								<button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
									<i class="ace-icon fa fa-search nav-search-icon white"></i>
								</button>
								<button type="button" class="btn btn-info btn-sm" style="height: 30px;position:absolute;left:268px;" id="add-white-list-batch">
									<i class="ace-icon fa fa-plus bigger-110 "></i> 批量添加白名单
								</button>
								<button type="button" class="btn btn-info btn-sm" style="height: 30px;position:absolute;left:418px;" id="delete-white-list-batch">
									<i class="ace-icon fa fa-trash bigger-110 "></i> 批量移除白名单
								</button>
							</div>
						</div>
					</div>
					<!-- 管理员权限 -->
					<?php if($rmxUser['user_type'] == USER_TYPE_SCHOOL): ?>
						<div class="form-inline keyword-search-div" id="div-grade">
							<label class="keyword-search-label">年级&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-grade active" data-id="0">全部</a>
								<?php if(isset($gradeList)): ?>
									<?php foreach($gradeList as $grade): ?>
										<a href="javascript:;" class="keyword-search-keyword keyword-search-grade"  data-id="<?=$grade['id']?>"><?=$grade['grade_name']?></a>
									<?php endforeach; ?>
								<?php endif ?>
							</div>
						</div>
						<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">行政班</label>
							<div class="keyword-search-box">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class active" data-id="0">全部</a>
							</div>
						</div>
					<?php else: ?>	
						<!-- 教师权限 -->
						<div class="form-inline keyword-search-div" id="div-normal-class">
							<label class="keyword-search-label">行政班</label>
							<div class="keyword-search-box div-classes">
								<a href="javascript:;" class="keyword-search-keyword keyword-search-class active" data-id="0">全部</a>
								<?php foreach($rmxUser['classArr'] as $class): ?>
									<a href="javascript:;" class="keyword-search-keyword keyword-search-class" data-id="<?=$class['id']?>"><?=$class['name']?></a>
								<?php endforeach; ?>
							</div>
						</div>
					<?php endif ?>
					<div class="form-inline keyword-search-div">
						<label class="keyword-search-label">白名单</label>
						<div class="keyword-search-box" id="div-white">
							<a href="javascript:;" class="keyword-search-keyword active" data-value="-1">全部</a>
								<a href="javascript:;" class="keyword-search-keyword" data-value="1">是</a>
								<a href="javascript:;" class="keyword-search-keyword" data-value="0">否</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<!-- 学校表格 -->
	<table id="dynamic-table" class="table table-striped table-bordered table-hover mt10">
		<thead>
			<tr>
				<th class="center">
					<label class="check-th">
						<input type="checkbox" class="ace" id="check-first">
						<span class="lbl"></span>
					</label>
				</th>
				<th>学生名称</th>
				<th>就读班级</th>
				<th>学号</th>
				<th>是否白名单</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<!-- 批量更新班级弹窗 -->
<div id="myModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					批量更新选中的学生班级
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="image-form">
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">所属角色：</label>
								<div class="col-sm-6">
								<div class="col-sm-12 tree">
									<ul id="role-tree"></ul>
								</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="batch-update-class">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	var schoolId = 0;
	// 班级数据
	var normalClassJson = <?= $gradeNormalClassList ?>;
	$(function(){
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('school/get_student_list_for_smart_lock')?>',
			"columns": [
	            {"data": function(ret){
					return "<div class='center'><label class='check-td'><input type='checkbox' class='ace check-list' value=" + ret.id + "><span class='lbl'></span></label></div>";
				}},	
				{"data": function(ret){
					if(ret.gender == '男') {
						var gender = ' <i class="fa fa-mars blue"></i>';
					} else {
						var gender = ' <i class="fa fa-venus red"></i>';
					}
					return ret.realname + gender;
	            }},
	            {"data": function(ret){
	            	return '<span class="label label-success" style="margin-right:5px">'+ ret.className +'</span>'
	            }},
				{"data": "username"},
				{"data": "isWhiteList"},
	            {"data": function(ret){
					var action = '';
					if(ret.white_list_id) {
						action += '<a class="text-danger delete-white-list mr20" href="javascript:" data-studentid=' + ret.id + ' data-realname=' + ret.realname + ' ><i class="fa fa-trash"></i> 移除白名单</a>';
					} else {
						action += '<a class="text-success add-white-list" href="javascript:" data-studentid=' + ret.id + ' data-realname=' + ret.realname + ' ><i class="fa fa-plus"></i> 添加白名单</a>';
					}
					
					return action;
	            }},
			],
			"callback": function() {
			}
		});

		// 年级班级联动
		$("#data-search-grade").change(function(){
			var gradeId = $(this).val();
			var classSelect = $("#data-search-class");
			var getUrl = "<?=admin_url('school/get_class_list')?>/" + gradeId;
			ajax_get(getUrl, {hideLoading: true}, function(res){
				var optionHtml = "";
				classSelect.html('<option value="">全部班级</option>');

				for(var i in res.data) {
					var classData = res.data[i];
					if(classData.class_type == '<?=CLASSES_TYPE_NORMAL?>') classSelect.append('<option value="'+ classData.id +'">'+ classData.class_name +'</option>');
				}
			})
		})
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			// 如果是点击年级
			if($(this).hasClass("keyword-search-grade")) {
				// 先清空班级列表
				$(".keyword-search-normal-class:gt(0)").remove();
				// 获取班级列表
				var normalClassList = normalClassJson[id];
		
				for(var i in normalClassList) $(".keyword-search-normal-class:first").parent().append('<a href="javascript:;" class="keyword-search-keyword keyword-search-normal-class" data-id="'+ normalClassList[i].id +'">'+ normalClassList[i].name +'</a>');
		
				// 选中全部班级
				var studentName = $("[name=student-name]").val();
				var gradeId = $("#div-grade .active").data("id");
				var white = $("#div-white .active").data("value");
				// 筛选班级
				table.setAjaxData({
					"keyword": studentName,
					"gradeId": gradeId,
					"white": white
				});
			} else {
				var studentName = $("[name=student-name]").val();
				var gradeId = $("#div-grade .active").data("id");
				var classId = $("#div-normal-class .active").data("id");
				var white = $("#div-white .active").data("value");
				// 筛选班级
				table.setAjaxData({
					"classId": classId,
					'keyword': studentName,
					"gradeId": gradeId,
					"white": white
				});
			}
		});
		// 敲回车就搜索
		$("[name=student-name]").keypress(function (e) {
                if (e.which == 13) {
                    $("#btn-search").trigger("click");
                }
		});
		// 清空搜索框
		$("[name=student-name]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=student-name]").val('');
					$(this).hide();
					// 重置搜索结果
					var gradeId = $("#div-grade .active").data("id");
					var classId = $("#div-normal-class .active").data("id");
					var white = $("#div-white .active").data("value");
					table.setAjaxData({
						"gradeId": gradeId,
						"classId": classId,
						"white": white
					});
				})
			} else {
				$("#empty-search").hide();
			}
		}); 
		// 搜索标题
		$("#btn-search").click(function() {
			var studentName = $("[name=student-name]").val();
			var gradeId = $("#div-grade .active").data("id");
			var classId = $("#div-normal-class .active").data("id");
			var white = $("#div-white .active").data("value");
			table.setAjaxData({
				'keyword': studentName,
				"gradeId": gradeId,
				"classId": classId,
				"white": white
			})
		});
		
		// 添加白名单操作
		$("body").on('click', '.add-white-list', function() {
			var realname = $(this).data('realname');
			var studentId = $(this).data('studentid');
			layer.confirm('确认添加白名单：' + realname + '？', function(index){
				var posturl = "<?= admin_url("school/add_smart_lock_student_white_list_action") ?>";
				var data = {
					'student_id': studentId,
				};
				ajax_post(posturl, data, function() {
					// 刷新页面
					window.location.reload();
				});
			});
		});

		// 移除白名单操作
		$("body").on('click', '.delete-white-list', function() {
			var realname = $(this).data('realname');
			var studentId = $(this).data('studentid');
			layer.confirm('确认移除白名单：' + realname + '？', function(index){
				var posturl = "<?= admin_url("school/delete_smart_lock_student_white_list_action") ?>";
				var data = {
					'student_id': studentId,
				};
				ajax_post(posturl, data, function() {
					// 刷新页面
					window.location.reload();
				});
			})
		});

		// 全选复选款
		$("#check-first").change(function(e) { 
			var checked =  $("#check-first").is(':checked'); 
			if(checked){
				$('.check-list').each(function (i){
					$(this).prop('checked', true);
				})
			} else{
				$('.check-list').each(function (i){
					$(this).prop('checked', false);
				})
			}
		});
		// 监听子复选框
		setTimeout(() => {
			$(".check-list").change(function(e) { 
				var checked = $(this).is(':checked');
				if(checked) {
					var allChecked = true;
					$('.check-list').each(function (i){
						if(!$(this).is(':checked')) {
							allChecked = false;
						}
					})
					if(allChecked) {
						$("#check-first").prop('checked', true);
					} else {
						$("#check-first").prop('checked', false);
					}
				} else {
					$("#check-first").prop('checked', false);
				}
			});
		}, 500);
		setTimeout(() => {
			$(".check-list").change(function(e) { 
				var checked = $(this).is(':checked');
				if(checked) {
					var allChecked = true;
					$('.check-list').each(function (i){
						if(!$(this).is(':checked')) {
							allChecked = false;
						}
					})
					if(allChecked) {
						$("#check-first").prop('checked', true);
					} else {
						$("#check-first").prop('checked', false);
					}
				} else {
					$("#check-first").prop('checked', false);
				}
			});
		}, 2000);

		// 批量添加白名单操作
		$("#add-white-list-batch").click(function(){
			layer.confirm('确认批量添加白名单？', function(index){
				var list = $("input:checkbox.check-list:checked");
				var lis =  $(".tree-selected");
				var idArr = new Array();
				list.each(function(){
					idArr.push($(this).val());
				});
				var postUrl = "<?=admin_url('school/add_smart_lock_student_white_list_batch_action')?>";
				var postData = {"id_arr": idArr};
				ajax_post(postUrl, postData, function(res){
					window.location.reload();
				})
			})
		});
		// 批量移除白名单操作
		$("#delete-white-list-batch").click(function(){
			layer.confirm('确认批量移除白名单？', function(index){
				var list = $("input:checkbox.check-list:checked");
				var lis =  $(".tree-selected");
				var idArr = new Array();
				list.each(function(){
					idArr.push($(this).val());
				});
				var postUrl = "<?=admin_url('school/delete_smart_lock_student_white_list_batch_action')?>";
				var postData = {"id_arr": idArr};
				ajax_post(postUrl, postData, function(res){
					window.location.reload();
				})
			})
		});
	})
</script>